<template>
	<view class="fui-wrap">
		<fui-form error-position="1" labelColor="#7a7a7a" ref="form" top="0" :model="formData">
			<fui-form-item label="逃费记录">
				<fui-input readonly :borderBottom="false" :padding="[0]" :value="detail.plate_number+' - ￥'+detail.total_fee"></fui-input>
			</fui-form-item>
			<fui-form-item label="追缴方式" prop="pay_type" :bottomBorder="false">
				<fui-radio-group name="radio" v-model="formData.recovery_type" @change="changeRadio">
					<view class="fui-list__column">
						<fui-label>
							<view class="fui-align__center">
								<fui-radio scaleRatio="0.8" borderRadius="6rpx" value="local" checked></fui-radio>
								<text style="margin-left: 10rpx;" class="fui-text">车场追缴</text>
							</view>
						</fui-label>
						<fui-label>
							<view class="fui-align__center">
								<fui-radio scaleRatio="0.8" borderRadius="6rpx" value="network"></fui-radio>
								<text style="margin-left: 10rpx;" class="fui-text">集团追缴</text>
							</view>
						</fui-label>
						<fui-label>
							<view class="fui-align__center">
								<fui-radio scaleRatio="0.8" borderRadius="6rpx" value="platform"></fui-radio>
								<text style="margin-left: 10rpx;" class="fui-text">平台追缴</text>
							</view>
						</fui-label>
					</view>
				</fui-radio-group>
			</fui-form-item>
			<fui-form-item>
				<fui-alert type="warn" :title="recovery_type_txt[formData.recovery_type]"></fui-alert>
				<view style="margin-top: 10rpx;" v-if="formData.recovery_type=='network'">
					支持停车场：
					<fui-tag :text="parking.title" v-for="(parking,index) in parkings" :key="index" style="margin-right: 10rpx;"></fui-tag>
				</view>
			</fui-form-item>
			<fui-form-item label="入场设置" arrow asterisk>
				<fui-input readonly @click="showPicker('entry_set')" :borderBottom="false" :padding="[0]" placeholder="请选择" :value="options[formData.entry_set]"></fui-input>
			</fui-form-item>
			<fui-form-item label="出场设置" arrow asterisk>
				<fui-input readonly @click="showPicker('exit_set')" :borderBottom="false" :padding="[0]" placeholder="请选择" :value="options[formData.exit_set]"></fui-input>
			</fui-form-item>
			<fui-form-item label="发送消息">
				<view style="width: 100%;display: flex;justify-content: flex-end;">
					<fui-checkbox-group name="checkbox" v-model="msg">
						<view class="fui-list__item">
							<fui-label>
								<view class="fui-align__center">
									<fui-checkbox borderRadius="6rpx" :value="1"></fui-checkbox>
									<text style="margin-left: 10rpx;" class="fui-text">入场发送通知给管理员</text>
								</view>
							</fui-label>
						</view>
					</fui-checkbox-group>
				</view>
			</fui-form-item>
			<view class="fui-btn__box">
				<fui-button :disabled="disabledButton" text="提交" bold @click="submit"></fui-button>
			</view>
		</fui-form>
		<fui-picker :options="options" :show="showSet.show" @change="changePicker" @cancel="cancelPicker"></fui-picker>
	</view>
</template>

<script>
	import {methods,baseUrl} from '@/utils/core.js';
	export default {
		data() {
			return {
				detail:'',
				parkings:[],
				recovery_type_txt:{
					local:'车场追缴，仅在当前停车场内追缴欠费',
					network:'集团追缴，指在集团下所有停车场内追缴欠费',
					platform:'平台追缴，指在平台下所有停车场追缴欠费，平台追缴欠费需要加入《平台追缴计划》，如有疑问请联系客服',
				},
				options:['不予处理','付费后开闸','岗亭确认开闸'],
				showSet:{
					show:false,
					act:''
				},
				msg:[1],
				formData:{
					records_id:'',
					recovery_type:'local',
					entry_set:'',
					exit_set:'',
					msg:1
				},
				disabledButton:false
			}
		},
		onLoad(e) {
			this.formData.records_id=e.records_id;
			this.getDetail(e.records_id);
		},
		methods: {
			...methods,
			submit:function(){
				let rules = [{
					name: "entry_set",
					rule: ["required"],
					msg: ["请选择入场设置"]
				},{
					name: "exit_set",
					rule: ["required"],
					msg: ["请选择出场设置"]
				}];
				this.disabledButton=true;
				this.formData.msg=this.msg.length>0?1:0;
				this.$refs.form.validator(this.formData, rules,true).then(res => {
					if (res.isPassed) {
						this.$post('parking/records/set-recovery',this.formData,true,true).then(res=>{
							this.$redirectTo('parking/records/recovery',1500);
						}).catch(err=>{
							this.disabledButton=false;
						});
					}else{
						this.disabledButton=false;
					}
				}).catch(err => {
					this.disabledButton=false;
				});
			},
			getDetail:function(records_id){
				this.$get('parking/records/recovery-info',{id:records_id},true).then(res=>{
					this.detail=res.records;
					this.parkings=res.parkings;
				});
			},
			showPicker:function(e){
				this.showSet.act=e;
				this.showSet.show=true;
			},
			changePicker:function(e){
				let index=this.options.indexOf(e.value);
				this.formData[this.showSet.act]=index;
				this.showSet.show=false;
			},
			cancelPicker:function(){
				this.showSet.show=false;
			},
			changeRadio:function(e){
				let value=e.detail.value;
				if(value=="platform"){
					this.options=['不予处理','付费后开闸'];
				}else{
					this.options=['不予处理','付费后开闸','岗亭确认开闸'];
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.fui-btn__box{
	padding: 20rpx;
}
.fui-list__item{
	display: flex;
}
.fui-list__column{
	display: flex;
	flex-direction: column;
	height: 160rpx;
	justify-content: space-between;
}
.qrcode{
	text-align: center;
	padding: 20rpx 0;
}
</style>